<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h2> {{ 'APP_LOGGING' | translate }}</h2>
        <clr-datagrid [clrDgLoading]="loading">
            <clr-dg-action-bar>
                <div style="display: inline;">
                    <div class="clr-select-wrapper" style="display: inline;">
                        <select class="clr-select" (change)="refresh()" [(ngModel)]="queryOption">
                            <option value="name">{{'APP_NAME'|translate}}</option>
                            <option value="operation">{{'APP_OPERATION'|translate}}</option>
                            <option value="operationInfo">{{'APP_OPERATION_INFO'|translate}}</option>
                        </select>
                    </div>
                    <input clrInput name="queryInfo" (keyup)="refresh()" [(ngModel)]="queryInfo" />
                </div>
            </clr-dg-action-bar>
            <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_OPERATION'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_OPERATION_INFO'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>
           
            <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
                <clr-dg-cell>{{item.name}}</clr-dg-cell>
                <clr-dg-cell>{{item.operation}}</clr-dg-cell>
                <clr-dg-cell>{{item.operationInfo}}</clr-dg-cell>
                <clr-dg-cell>{{item.createdAt |date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                                   (clrDgPageChange)="refresh()">
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_LOGGING"|translate}}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>